import { cloneElement, isValidElement } from "react";
import { TextFieldProps } from "../textfield/textfield";
interface TextFieldContainerProps {
  children: React.ReactElement[];
}

export const TextFieldContainer = ({
  children,
}: TextFieldContainerProps): React.ReactElement => {
  const childrenWithProps = children.map((child, index) => {
    if (isValidElement(child) && typeof child.props === "object") {
      return cloneElement(child, {
        id: index,
        ...(child.props as TextFieldProps),
        key: index,
      });
    }
    return child;
  });

  return (
    <>
      <div className="text_field_container_box">
        <form action="">{childrenWithProps}</form>
      </div>
    </>
  );
};
